<template>
    <div>
        <el-form :model="ruleForm" ref="ruleForm"  :rules = "rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">

            <div class="container" style="margin-top:20px;">
				<h3>新建订单</h3>
                <el-row style="margin-top:20px;">
					<el-col :span="12">
						<el-form-item label="客户名称：" prop="name">
						    <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width: 300px"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="交付时间：">
						    <el-date-picker
						        v-model="ruleForm.leadTime"
						        type="date"
						        value-format="yyyy-MM-dd"
						        placeholder
						        style="width: 300px"
						    ></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
            </div>
		  <div class="container" style="margin-top:20px;">
			<h5>选择品类</h5>
		     <el-row>
				 <el-col :span="12">
					 <el-form-item label="仓位号：" prop="nums" >
					     <el-select v-model="freightSpace" style="width: 300px" value-key="id" placeholder="请选择" @change="getfreightSpace">
					         <el-option v-for="item in freightSpaceList" :key="item.id" :label="item.name" :value="item"></el-option>
					     </el-select>
					 </el-form-item>
					 <el-form-item label="产品名称：" prop="prodName">
					     <el-input placeholder="请输入内容" v-model="ruleForm.prodName" disabled style="width: 300px"></el-input>
					 </el-form-item>
					 <el-form-item label="货主名称：" prop="ownerName">
					     <el-input placeholder="请输入内容" v-model="ruleForm.ownerName" disabled style="width: 300px"></el-input>
					 </el-form-item>
				 </el-col>
				 <el-col :span="10">
					 <el-form-item label="货架号：" prop="nums">
					     <el-select v-model="goodsShelf" style="width: 300px" value-key="id" placeholder="请选择" @change="getgoodsShelf">
					         <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item"></el-option>
					     </el-select>
					 </el-form-item>
					 <el-form-item label="品级：" prop="levelName">
					     <el-input placeholder="请输入内容" v-model="ruleForm.levelName" disabled style="width: 300px"></el-input>
					 </el-form-item>
				 </el-col>
			 </el-row>

			  <el-row style="margin-top:20px;">
			  	<el-col :span="12">
			  		<el-form-item label="交易数量：" prop="nums" >
			  		    <el-input placeholder="请输入内容" v-model="ruleForm.nums" @change="numss" style="width: 300px"></el-input>  kg
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="10">
			  		<el-form-item label="交易金额：" prop="money">
			  		    <el-input placeholder="请输入内容" v-model="ruleForm.money" style="width: 300px"></el-input>
			  		</el-form-item>
			  	</el-col>
			  </el-row>
		  </div>
		  <div class="container" style="margin-top:20px;">
			  <h5>物流信息</h5>
		      <el-row style="margin-top:20px;">
		      	<el-form-item label="运输方式：">
		      		<el-radio-group v-model="ruleForm.type" @change="handletab">
		      			<el-radio label="1">物流车</el-radio>
		      			<el-radio label="2">物流/快递</el-radio>
		      		</el-radio-group>
		      	</el-form-item>
		      	<el-col v-if="type == '1'">
		      		<el-form-item label="司机名称：">
		      			<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.driverName"></el-input>
		      		</el-form-item>

		      		<el-form-item label="联系电话：">
		      			<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.driverPhone"></el-input>
		      		</el-form-item>
					<el-form-item label="车牌号：">
						<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.driverCarNum"></el-input>
					</el-form-item>
		      	</el-col>
		      	<el-col v-if="type == '2'">
		      		<el-form-item label="快递名称：">
		      			<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.expressName"></el-input>
		      		</el-form-item>
		      		<el-form-item label="快递单号：">
		      			<el-input placeholder="请输入内容" style="width:300px;" v-model="ruleForm.expressNum"></el-input>
		      		</el-form-item>
		      	</el-col>
		      </el-row>
			</div>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">入库</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
	import axios from "axios"

    export default {

        data() {
            return {
				freightSpaceList:[],
				goodsShelf:{},
				freightSpace:{},
				listUrl1:'',
				settleTypelist:[],
                typeList:[],
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',
               type:1,
                ruleForm: {

					levelName:'',
					ownerName:'',
					prodName:'',
					levelId:''
                },
                rules:{

                },
				num:''
            }
        },
        mounted(){

           // if(this.id == undefined){

           // }else{
               this.init()
           // }
        },
        methods: {
			numss(e){
				if(e > this.num){
					this.$notify({
					    title: '提示',
					    message: '交易数量不能大于产品数量',
					    type: 'info',
					    duration: 1000
					});
					this.ruleForm.nums = ""
				}
			},
			handletab(){

			},
			getfreightSpace(e){
				// console.log(e)
				axios.get("http://47.108.220.160:90/jcApi/plant/control/storeOrder/getShelvesByPosition/"+e.id).then((res)=>{
					this.typeList = res.data.data
					this.ruleForm.levelId = ""
					this.ruleForm.levelName = ""
					this.ruleForm.ownerName = ""
					this.ruleForm.prodName = ""
					this.goodsShelf = ""
				})
			},
			// 根据id 获取详细信息
            init(){

				axios.get("http://47.108.220.160:90/jcApi/plant/control/storeOrder/getAllPositions").then((res)=>{

					this.freightSpaceList = res.data.data

				})
            },
			getgoodsShelf(e){
				axios.get("http://47.108.220.160:90/jcApi/plant/control/storeOrder/getGoodsBySId/"+e.id).then((res)=>{
					// this.typeList = res.data.data
					// console.log(e)
					var l =res.data.data
					this.ruleForm.levelId = l.goodsLevel
					this.ruleForm.levelName = l.goodsLevelName
					this.ruleForm.ownerName = l.ownerName
					this.ruleForm.prodName = l.goodsName
					this.num = l.goodsNum
					// console.log(this.ruleForm)
				})
			},
			// 添加货架

		   // 返回上一页
            backPage () {
                this.$router.go(-1);
            },
			// 提交
            submitrule(formName) {
				if(this.type == "1"){
					this.ruleForm.expressName == ""
					this.ruleForm.expressNum = ""
					this.ruleForm.type = 1
				}else{
					this.ruleForm.driverName = ""
					this.ruleForm.driverPhone = ""
					this.ruleForm.driverCarNum = ""
					this.ruleForm.type = 2
				}
				let data = this.ruleForm
				this.ruleForm.positionId = this.freightSpace.id
				this.ruleForm.positionName = this.freightSpace.name
				this.ruleForm.shelvesId = this.goodsShelf.id
				this.ruleForm.shelvesName = this.goodsShelf.name
				axios.post("http://47.108.220.160:90/jcApi/plant/control/storeOrder/save",data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success',
					    duration: 1000
					});
					this.backPage()
				})
            },
        }
    }
</script>

<style scoped lang="less">
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>
